<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Examples</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <style>
      html,body{height:100%;overflow:hidden;}
      body,div,h2{margin:0;padding:0;}
      body{font:12px/1.5 Tahoma;text-align: center;}
      #content button {
        cursor: pointer;
        margin-top: 10px;
      }
      #overlay {
        position: absolute;
        display: none;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        background: #000;
        opacity: 0.5;
        filter: alpha(opacity = 50);
      }

      #win {
        position: absolute;
        display: none;
        width: 400px;
        height: 200px;
        border: 4px solid #f90;
        top: 50%;
        left: 50%;
        margin-top: -104px;
        margin-left: -204px;
        background: #fff;
      }

      #win h2 {
        font-size: 12px;
        text-align: right;
        background: #FC0;
        border-bottom: 3px solid #f90;
        padding: 5px;
      }

      #win h2 span {
        color: #f90;
        background: #fff;
        border: 1px solid #f90;
        font-size: 12px;
        padding: 0 2px;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <div id="overlay"></div>
    <div id="win">
      <h2>
        <span id="close">x</span>
      </h2>
    </div>
    <div id="content">
      <button type="buton">弹出层</button>
    </div>

    <script>
      window.onload = function() {
        var oWin = document.getElementById("win"),
            oLay = document.getElementById("overlay"),  
            oBtn = document.getElementsByTagName('button')[0],
            oClose = document.getElementById('close');
        oBtn.onclick = function() {
          oLay.style.display = "block";
          oWin.style.display = "block"; 
        } 
        oClose.onclick = function() {
          oLay.style.display = "none";
          oWin.style.display = "none";
        }
      }
    </script>    
  </body>
</html>